<template>
    <div class="fullScreen" ref="withdrawal"> 
        <m-header :msg="'提现'"></m-header>
        <!-- 待审核界面 -->
        <div class="bg-c-wh he-fv" v-show="!checkeStatus">
            <div class="promptMsg">
                <span class="tx-s-18">{{ unchecked.showtext }}</span>
            </div> 
            <div class="promptMsg">
                <div class="flex-box flex-ac">
                    <div class="wd-5 tx-c-666">订单号：</div>
                    <div>{{ unchecked.orderNo }}</div>
                </div>
                <div class="flex-box flex-ac">
                    <div class="wd-5 tx-c-666">时间：</div>
                    <div>{{ unchecked.createtime }}</div>
                </div>
                <div class="flex-box flex-ac">
                    <div class="wd-5 tx-c-666">金额：</div>
                    <div>{{ unchecked.change }}</div>
                </div>
                <div class="flex-box flex-ac">
                    <div class="wd-5 tx-c-666">状态：</div>
                    <div class="tx-c-o">{{ unchecked.status }}</div>
                </div>
            </div> 
            <div class="flex-box flex-pa btn">
                <div class="cancel-btn-s" @click="toNext('/recommend')">去购彩</div>
                <div class="submit-btn-s" @click="toNext('/tradingRecords')">交易记录</div>
            </div> 
        </div>
        <!-- 待审核界面结束 -->
        <!-- 提现界面 -->
        <div class="bg-c-wh he-fv" v-show="checkeStatus">
            <!-- 提现信息 -->
            <div class="promptMsg">
                <div class="flex-box flex-ac">
                    <div class="tx-r tx-c-666">会员账户：</div>
                    <div>{{ bfUserInfo.username }}</div>
                </div>
                <div class="flex-box flex-ac">
                    <div class="tx-r tx-c-666">取款限额：</div>
                    <div>{{ bfUserInfo.minDrawVal }}-{{ bfUserInfo.maxDrawVal }}元</div>
                </div>
                <div class="flex-box flex-ac">
                    <div class="tx-r tx-c-666">收款人姓名：</div>
                    <div>{{ bfUserInfo.realname }}</div>
                </div>
                <div class="flex-box flex-ac">
                    <div class="tx-r tx-c-666">银行账号信息：</div>
                    <div>{{ bfUserInfo.bankName }} {{ bfUserInfo.bankCard }}</div>
                </div>
                <div class="flex-box flex-ac">
                    <div class="tx-r tx-c-666">取款金额：</div>
                    <div class="flex-f1 bor-b-g">
                        <input v-model="drawMoney" class="input-mar" type="number" placeholder="请输入取款金额"/>
                    </div>
                </div>
                <div class="flex-box flex-ac">
                    <div class="tx-r tx-c-666">取款密码：</div> 
                    <div class="flex-f1 bor-b-g">
                        <input v-model="drawPassword" class="input-mar" :type="inputType" placeholder="请输入取款密码"/>
                    </div>
                    <div class="flex-bap psw-but" @click="togPsw"> 
                        <div :class="{
                            'psw-look' : !psdStatuas,
                            'psw-nolook' : psdStatuas,
                        }"></div>
                    </div>
                </div>
            </div> 
            <!-- 提现信息结束 -->
            <!-- 提交按钮 -->
            <div class="submit-btn marg-1" @click="submitConfirm">提交</div>
            <!-- 友情提示 -->
            <div class="marg-1">
                <div class="flex-box flex-ac">
                    <div class="icon_warning"></div>
                    <div class="tx-c-o tx-s-14">&nbsp;&nbsp;友情提示</div>
                </div>
                <div class="tx-c-666 tx-s-12 line-h">1: 银行账户持有人姓名必须与注册时输入的姓名一致，否则无法申请提款。
                    <br/>2: 每位客户只可以使用一张银行卡进行提款，如需要更换银行卡请联系在线客服进行咨询，否则提款将被拒绝。
                </div>
            </div>
        </div>
        <!-- 提现界面结束 -->
    </div>
</template>

<script type="text/ecmascript-6"> 
import 'common/css/user.css'
import { mapGetters } from 'vuex'
import MHeader from '../../components/m-header'
import { checkTX, withdrawal } from '../../common/js/axiosUtil' 
import { isDefine, getClass } from '../../common/js/common'
export default {
    data() {
        return {
            drawMoney : '',
            drawPassword : '',
            unchecked : {},
            checkeStatus : false, 
            psdStatuas : false,
            inputType : 'password'
        }
    },
    created() {
        this.checkStatus() 
    },
    methods: {
        checkStatus () {
            this.$toast('加载中...', 1000000) 
            let params = new URLSearchParams()
            const token = this.$token()
            params.append('timeStamp', token[0])
            params.append('token', token[1])
            params.append('uid', this.bfUserInfo.uid)
            checkTX(params)
            .then((response) => {
                this.$toastClose()
                if(response.data.code == '200'){
                    const {data} = response.data
                    if(isDefine(data.orderNo)){
                        this.checkeStatus = false
                        this.unchecked = data
                    }else{
                        this.checkeStatus = true
                    }
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error) => { 
                this.$toast('请求服务失败', 2000)
            })
        },
        togPsw () {
            this.psdStatuas = !this.psdStatuas
            this.inputType = this.inputType === 'password' ? 'text' : 'password'
        },
        toNext (path) {
            if(path == '/tradingRecords'){
                this.$router.replace({
                    path: '/tradingRecords',
                    query: {
                        id: '2'
                    }
                })
            }else{
                this.$router.replace(path)
            }
        },
        submitConfirm () { 
            // 通过ClassName获取需填项
            const arr = getClass("input-mar")
            // 判断各项是否已填写
            if(this.$checkWrite(arr, 'toast')){
                return
            }
            const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
            this.$vux.confirm.show({
                // 组件除show外的属性
                content: '确认提现？',
                cancelText: '取消',
                confirmText: '提现',
                hideOnBlur: true,
                onCancel () {
                },
                onConfirm () {
                    _this.withdrawalSubmit()
                }
            })
        },
        withdrawalSubmit () {
            this.$toast('提交中...', 1000000) 
            let params = new URLSearchParams()
            const token = this.$token()
            params.append('timeStamp', token[0])
            params.append('token', token[1])
            params.append('uid', this.bfUserInfo.uid)
            params.append('drawMoney', this.drawMoney)
            params.append('drawPassword', this.md5(this.drawPassword))
            withdrawal(params)
            .then((response) => {
                this.$toastClose()
                if(response.data.code == '200' && response.data.msg == "提现成功"){
                    this.$router.replace('/withdrawalResult')
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error) => { 
                this.$toast('请求服务失败', 2000)
            })
        }
    },
    components: { 
        MHeader
    },
    computed: {
        ...mapGetters([
            'bfUserInfo'
        ])
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    .promptMsg
        padding : 1rem 1rem
        line-height : 1.75rem
        font-size : $fonts-14
        color : $color-2
    .wd-5
        width : 30%
        margin : .325rem 0
    .btn
        padding : 1rem .75rem
        font-size : $fonts-14
    .tx-r
        width : 6.5rem
        text-align : right
        margin : .325rem 0
    .input-mar
        width : 95%
        margin : 0 2.5%
        outline : none
    .psw-but
        height : 1.75rem
        width : 2rem
        border-bottom : 1px solid $color-f0
    .line-h
        line-height : 1.125rem
        margin-top : .75rem
</style>